
<template>
	<div>
	  <div class="layout">
		<div class="view-list">
		  <div class="view-item" @click="goHistory()">
			<div class="-item-image">
			  <u-image width="150rpx" mode="scaleToFill" height="150rpx" src='@/static/ikun.png' ></u-image>
			</div>
			<div class="-item-tilte">我的接单</div>
		  </div>
		  <div class="view-item" @click="goTake">
			<div class="-item-image">
			  <u-image width="150rpx" mode="scaleToFill" height="150rpx"  src='@/static/ikun2.png' ></u-image>
			</div>
			<div class="-item-tilte">待取件</div>
		  </div>
		  <div class="view-item" @click="goTran">
			<div class="-item-image">
			  <u-image width="150rpx" mode="scaleToFill" height="150rpx"  src='@/static/ikun3.png' ></u-image>
			</div>
			<div class="-item-tilte">已取件</div>
		  </div>	  
		</div>
	  </div>
	  <div class="div_center">
		  <view class="address_title" style="display: inline-block;">
		  	<view class="address_title_text">
		  		当前位置
		  	</view>
			<view class="renew-icon" @click="renew" style="margin-left: 18rpx;margin-top: 0;">
		  	<image src="@/static/home/renew.png" alt="" style="width: 60rpx;height:50rpx;"  ></image>
		  </view>
		  </view>
		  
		  <view class="address-content">
		  	<view class="content-left">
		  		{{address}}
		  	</view>
			<view class="content-right" @click="upload">
				<image src="@/static/home/upload.png" alt=""  style="width: 60rpx;height:60rpx;" ></image>
			</view>
		  </view>
	  </div>
	   <div class="div_bottom">
		   <div style="margin-top: 160rpx;">
				<!-- <div @click="showMore" class="oldKeyItem">更多></div> -->
				<div class="round">
					<image src="@/static/home/news.png" alt="round"  style="width: 60rpx;height:60rpx;"  ></image>
					
					<div class="text-content">网点公告</div>
				</div>
				
				<scroll-view scroll-y="true" >	
					<div class="info-box">
						<empty v-if="noticeList.total === 0" />   
							<div
							  v-else
							  v-for="(item, index) in noticeList"
							  :key="index"
							  @click="godetailinfo(index,noticeList[index].noticeId)"
							>
								<div class="info-item" @click="toNoticeDetail(item.noticeId)">
									<div class="img-div" id="div1">
		<!-- 							  <img
										:src="item.frontCover"
										alt="info-img"
										class="info-img"
									  /> -->
									</div>
									<div class="detail-wrap">
										<div class="info-name">{{ item.noticeTitle }}</div>
										<div class="info-time">{{ item.createTime.slice(0,10)}}</div>
					  
									</div>
								</div>
							</div>  
					</div> 
				</scroll-view>
						
						
						
									
				</div>				   
		   
		   
		   </div>
	   
	   </div>
	   


	</div>


</template>

<script>

import qqmapsdk from '@/sdk/qqmap-wx-jssdk.js'
import amap from '@/sdk/amap-wx.130.js';
import app from "@/App.vue";
import { listOrder,updateOrder} from "@/api/order";
import {listNotice,getNotice} from "@/api/notice.js"
import {updateOrderTran,getOrderTran} from "@/api/tran.js"
export default {
  title: "文字图片模板",

   data () {
    return {
		noticeList:[],
		pointsArr:[],
		address: '', //定位获取的位置
		lng:'',
		lat:'',
		city: null,
		key: 'ac56ed3edcc485dda8b0f9e47a0c4088', //高德key
	    po_tips: '重新定位',
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			orderId: undefined,
			orderNumber: undefined,
			postmanPhone: undefined,
			partyPhone: undefined,
			orderParty: undefined,
			orderPostman: undefined,
			orderStatus:undefined,
			orderDept: undefined
		},
		orderListTran:[],
      getArticle:[{
		  frontCover:"@/static/tabbar/back.png",
		  title:"我是标题",
		  updateTime:"1999.12.25"
	  },{
		  frontCover:11,
		  title:"我是标题",
		  updateTime:"1999.12.25"
	  },
	  {
	  	  frontCover:11,
	  	  title:"我是标题",
	  	  updateTime:"1999.12.25"
	  },
	  {
	  	  frontCover:11,
	  	  title:"我是标题",
	  	  updateTime:"1999.12.25"
	  }],
    }
  },
  methods:{
	  showMore(){
		  
	  },
	  godetailinfo(index,id){
		  
	  },
	  goHistory(){
		  uni.setStorageSync("taskHistory",4)
		  uni.switchTab({
		  	url: '../task/index'
		  });	
	  },
	  goTake(){
		  uni.setStorageSync("taskHistory",1)
		  uni.switchTab({
		  	url: '../task/index'
		  });			  
	  },
	  goTran(){
		  uni.setStorageSync("taskHistory",2)
		  uni.switchTab({
		  	url: '../task/index'
		  });			  
	  },
	  renew(){
		  // 刷新按钮实现刷新
		  this.getWarpweft()
	  },
	  upload(){
		  // 上传按钮实现上传
		  this.queryParams.orderDept=app.globalData.deptId
		  this.queryParams.orderStatus='0'
		  this.queryParams.orderPostman=app.globalData.userId
		  console.log(this.queryParams)
		  listOrder(this.queryParams).then(res => {
		  	console.log(res)
		    this.orderListTran = res.rows;
		    this.orderListTran.forEach(function(item,index){
				this.pointsArr=[]
			  getOrderTran(item.orderNumber).then(response => {
				//this.form = response.data;
				if(response.data!=null){
				  console.log(response)
				  this.pointsArr=JSON.parse(response.data.orderTran);
				  var obj={}
				  obj.lat=this.lat
				  obj.lng=this.lng
				  this.pointsArr.push(obj)
				  console.log(JSON.stringify(this.pointsArr))
				  let tranObj={}
				  tranObj.orderTranId=response.data.orderTranId
				  tranObj.orderNumber=item.orderNumber
				  tranObj.orderTran=JSON.stringify(this.pointsArr)
				  //let orderTranString = JSON.stringify(this.pointsArr)
				  updateOrderTran(tranObj).then(response=>{
					 uni.showToast({
					 	title: '上传成功',
					 	//将值设置为 success 或者直接不用写icon这个参数
					 	icon: 'success',
					 	//显示持续时间为 2秒
					 	duration: 2000
					 })  
				  })
				}
				else{
				  uni.showToast({
				  	title: '订单暂无物流，联系管理员添加',
				  	//将值设置为 success 或者直接不用写icon这个参数
				  	icon: 'fail',
				  	//显示持续时间为 2秒
				  	duration: 2000
				  }) 
				}
			  
			});
		    }.bind(this));
		  })
	  },
	  toNoticeDetail(id){
	  		  uni.navigateTo({
	  		  		url:'/pages/tabbar/home/notice?id='+id
					// url:'/pages/tabbar/task/test'
	  		  })
	  },
	  toOrderList(){
		  uni.navigateTo({
		      url: '/pages/tabbar/home/orderList'   
		  });
	  },
	  // toLocation(){
		 //  uni.navigateTo({
		 //      url: '/pages/tabbar/home/location'   
		 //  });
	  // },
	  getWarpweft() {
	  	var that = this
	  	that.po_tips = '定位中...'
	  
	  	//高德地图密钥，sdk
	  	var amapPlugin = new amap.AMapWX({ key: this.key });
	  	uni.showLoading({
	  	  title: "获取信息中",
	  	});
		let self=this
	  	amapPlugin.getRegeo({
			
	  	  success: (data) => {
	  	    console.log(data, "当前定位");
			self.address=data[0].name
			self.lat=data[0].latitude
			self.lng=data[0].longitude
	  		that.po_tips = '定位成功'
	  	    uni.hideLoading();
	  	  },
	  	  fail: (err) => {
	  	    console.log(err);
	  	  },
	  	});
	  	setTimeout(()=>{
	  		that.po_tips = '定位失败'
	  	}) 
	  }
  },
  onShow() {
  	listNotice().then(res=>{
  			  console.log(res)
  			  this.noticeList=res.rows
  	})
  },
  mounted() {
	  this.getWarpweft()

	  
	  // const QQMapWX = new qqmapsdk({
	  // 	key: 'ECEBZ-XMKCU-Q4JVO-BDEJI-TSM4S-RIBGM'
	  // });
// uni.getLocation({
// 	type: 'wgs84',
// 	geocode: true,
// 	success: (res) => {
// 		console.log("获取经纬度成功");
// 		this.latitude = res.latitude;
// 		this.longitude = res.longitude;
// 	},
// 	fail: () => {
// 		console.log("获取经纬度失败");
// 	},
// 	complete: () => {
// 		// 解析地址
// 		QQMapWX.reverseGeocoder({
// 			location: {
// 				latitude: this.latitude,
// 				longitude: this.longitude
// 			},
// 			success: function(res) {
// 				console.log("解析地址成功");
// 				console.log(res);
// 				// 省
// 				let province = res.result.ad_info.province;
// 				// 市
// 				let city = res.result.ad_info.city;
// 				console.log(province);
// 				console.log(city);
// 			},
// 			fail: function(res) {
// 				uni.showToast({
// 					title: '定位失败',
// 					duration: 2000,
// 					icon: "none"
// 				})
// 				console.log(res);
// 			},
// 			complete: function(res) {
// 				console.log(res);
// 			}
// 		})
// 	}
// })
		// //获取我的位置
	 //    // getUserLocation() {
	 //      var that = this;
	 //      //高德地图密钥，sdk
	 //      var amapPlugin = new amap.AMapWX({ key: this.key });
	 //      uni.showLoading({
	 //        title: "获取信息中",
	 //      });
	 //      amapPlugin.getRegeo({
	 //        success: (data) => {
	 //          console.log(data, "当前定位");
		// 	  this.address=data[0].name
		// 	  // that.citycopy = data[0].regeocodeData.addressComponent.city; 
				 

	 //          uni.hideLoading();
	 //        },
	 //        fail: (err) => {
	 //          console.log(err);
	 //        },
	 //      });
	 //    // },
  }
};
</script>
<style lang="scss" scoped>
	
scroll-view{
  width: 100%;
  height: 625rpx;
  white-space: nowrap;
}

.layout {
  display: flex;
  height: 400rpx;
  background: #ffc1ac;

  justify-content: center;
  background-size: cover;
  padding: 0;
}
.-item-image{
     
     padding: 10px ;
	 padding-top: 60rpx;
	 padding-left: 60rpx;
     >img{
        
         width: 50%;
     }
}
.-item-tilte {
  margin-left: 15rpx;
  // margin-bottom: 10rpx;
  height: 60rpx;
  color: #000000;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}

.view-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  background: #ffab9c;
   border-top-left-radius: 0.8em;
    border-top-right-radius: 0.8em;

    
  > .view-item {
    width: 100%;
  }
  > .view-item:nth-of-type(1) {
    > .-item-tilte {
      border-top-left-radius: 0.8em;
    }
  }
  > .view-item:nth-of-type(2) {
    > .-item-tilte {
      border-top-right-radius: 0.8em;
    }
  }
}
.div_center{
	// display:flex;
	// align-items: center;
	position: absolute;
	z-index: 299;
	width: 78%;
	margin-top: -90rpx;
	margin-left: 82rpx;
	height: 160rpx;
	background-color: #ffe4d3;
}
.address_title{
	display: flex;
	align-items: center;
	// background-color: #aa5409;
	width: 180rpx;
	height: 50rpx;
	margin-left: 30rpx;
	padding-left: 8rpx;
	font-size: 26rpx;
	margin-top: 20rpx;
	border-left:3px solid #aa5409;
}
.address_title_text {
	line-height: 50rpx;
	display: inline-block;
}
.renew-icon {
	float:right;
	height: 50rpx;
	margin-top: -50rpx;
	display: inline-block;
	// background-color: #aa5409;
}
.address-content{
	margin-left: 40rpx;
	margin-top: 20rpx;
}
.content-left{
	width: 500rpx;
	overflow : hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;  /* 设置超出多少行隐藏 */
	-webkit-box-orient: vertical;
	font-size: 26rpx;
	display: -webkit-box;
}
.content-right{
	float: right;
	margin-right: 60rpx;
	margin-top: -40rpx;
}
.div_bottom{
	height: 200rpx;
	margin-top: -40rpx;
	position: absolute;
	width: 100%;
	z-index: 199;
	background-color: #ffffff;
	border-radius: 50rpx;
}
.oldKeyItem {
	float: right;
  
	margin-top: 20rpx;
	padding-left: 10rpx;
	border:1px solid  #cccccc;
	color: #bcbcbc;
    background: #f9f9f9;
    margin-right: 30rpx;
    width: 80rpx;
	height: 35rpx;
    border-radius: 100px;
    font-size: 24rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 20rpx;
  
}
.round {
	margin-left: 20rpx;
	u-image {
		height: 60rpx;
		width: 60rpx;
	}
	.text-content {
		font-size: 35rpx;
		font-weight: 800;
		margin-left: 65rpx;
		margin-top: -58rpx;
	}
}

.info-box {
	margin-top: 35rpx;
	margin-left: 30rpx;
	margin-right: 20rpx;
	
}
.info-item {
	border-radius: 20rpx;
  background: #fff8f2;
  width: 100%;
  height: 200rpx;
  border-bottom:1px solid #d6d6d6;
  


    .detail-wrap {
      font-weight:500;
      margin-top: 10rpx;
	  margin-left: 30rpx;
      width: 100%;
      
    
     }
	 .info-name{
	   color: black;
	 		height: 130rpx;
	 		padding-top: 20rpx;
	   margin-bottom: 2rpx;
	   font-size: 26rpx;
	 		width: 40rpx;
	 		
	 }
	 .info-time{
	 		
	   font-size: 12px;
	   color: rgb(187, 184, 184);
	   white-space:nowrap;
	   overflow:hidden;
	   text-overflow:clip;
	   
	 }
  .img-div {
    margin: 20rpx;
	margin-right: 10rpx;
    float: right;
  }
  .info-img {
	  float: right;
    width: 250rpx;
    height: 170rpx;
    border-radius: 10px;
  }

}

</style>